<script lang="js" setup name="XSubMenu">
import { ref, computed, onMounted } from "vue";
import XSubMenuSlot from "./XSubMenuSlot.vue";
import XMenuItem from "./XMenuItem.vue";

const emit = defineEmits(["menuclick"]);

const props = defineProps({
	menu: {
		type: Object,
		required: true
	},
	index: {
		type: Number,
		required: true
	}
});


const hasChild = (menu) => {
	return menu.subMenu && menu.subMenu.length > 0;
};


const onMenuClick = (menu) => {
	emit("menuclick", menu);
	// console.log("menu click:", menu);
};
</script>

<template>
	<XSubMenuSlot :menu="menu" :index="index">
		<template #title>{{ menu.text }}</template>
		<ul>
			<template v-for="(item, index) in menu.subMenu">
				<XSubMenu v-if="hasChild(item)" :key="item.id" :menu="item" @menuclick="onMenuClick" />
				<XMenuItem v-else :key="item.id" :menu="item" @click="onMenuClick(item)" />
			</template>
		</ul>
	</XSubMenuSlot>
</template>

<style lang="scss" scoped></style>
